<template>
  <div class="container" >
    <div class="popup" ref="popup" @click="popupClose">
      <div class="con_left" @click.stop>
        <button class="new_talk" @click="play('1')">唤醒</button>
        <button class="new_talk" @click="play('2')">自我介绍</button>
        <button class="new_talk" @click="play('3')">描述中南智能</button>
        <!-- <button class="new_talk" @click="play">开始新对话</button>
        <button class="new_talk" @click="play">开始新对话</button> -->

        <!-- <div class="talk_list">
          <div
            v-for="item in talkList"
            @click="reTalk(item)"
            :class="{ border: tid == item.id }"
          >
            <span>{{ item.data[item.data.length - 2].content }}</span>
            <i class="el-icon-s-comment"></i>
          </div>
        </div> -->

        <!-- <div class="other">
          <div class="bar" @click="reward = true">
            <span>打赏作者</span>
            <i class="el-icon-arrow-right"></i>
          </div>
         <div class="bar" @click="wxCode = true">
            <span>微信小程序</span>
            <i class="el-icon-arrow-right"></i>
          </div> -->
        <!-- <div class="bar" @click="dialogVisible = true">
            <span>免责声明</span>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div> -->

        <div class="copyright">
          <img src="../../assets/images/profile.jpg" alt="" srcset="" />
          <div>
            <H2>工业小智</H2>
            <p>Star on <a href="http://www.zeqp.net/">中南智能</a></p>
          </div>
        </div>
      </div>
    </div>

    <div class="con_right" ref="con_right">
      <div class="header" ref="header">
        <div class="more_button" @click="popupShow">
          <i class="el-icon-s-operation"></i>
        </div>
        <!-- <img src="../../assets/images/aslogo.png" alt="" srcset=""> -->
        <span>AI Scene</span>
      </div>
      <div class="content">
        <div class="limit" v-if="messages.length <= 0">
          <div class="primary_con">
            <div class="">
              <i class="el-icon-connection"></i>
              <h3>AI能力</h3>
              <p @click="assign('scene是什么意思')">scene是什么意思</p>
              <p @click="assign('莲藕排骨汤怎么做')">莲藕排骨汤怎么做</p>
              <p @click="assign('今天的世界有哪些新闻热点')">今天的新闻热点</p>
              <p @click="assign('查询xx星座运势')">查询星座运势</p>
              <p @click="assign('有趣的科学实验')">有趣的科学实验</p>
              <p @click="assign('全球高分电影推荐')">全球高分电影推荐</p>
              <p>
                <i class="el-icon-more"></i>
              </p>
            </div>
            <div class="">
              <i class="el-icon-chat-line-square"></i>

              <h3>AI办公</h3>
              <p @click="assign('文章润色')">文章润色</p>
              <p @click="assign('写一篇方案报告')">写一篇方案报告</p>
              <p @click="assign('生成一篇关于xx的日报/周报')">
                生成一篇日报/周报
              </p>
              <p @click="assign('撰写一篇邮件/演讲稿')">撰写一篇邮件/演讲稿</p>
              <p @click="assign('代码报错解决')">代码报错解决</p>
              <p>
                <i class="el-icon-more"></i>
              </p>
            </div>
          </div>
          <div class="tip">更多AI能力等你来探索！</div>
        </div>

        <div class="content_list" ref="scrollDiv">
          <div class="talk_con">
            <contentList :contentList="messages"></contentList>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="input_con">
          <el-input
            type="textarea"
            :rows="3"
            :placeholder="disabled ? '获取中...' : '发送消息给工业小智'"
            v-model="content"
            @keyup.enter="send()"
          ></el-input>
          <div class="sub_btn" @click="send()">
            <i v-if="!disabled" class="el-icon-s-promotion"></i>
            <i v-else class="el-icon-loading"></i>
          </div>

          <div class="sub_btn1" @mousedown="recStart" @mouseup="recStop">
            <i v-if="!disabled" class="el-icon-microphone"></i>
            <i v-else class="el-icon-loading"></i>
          </div>
        </div>
        <p>
          Copyright ©zeqpcloud.net All Rights Reserved.
          <span @click="dialogVisible = true">免责申明</span>
        </p>
      </div>
    </div>

    <!-- <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
       
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import { openChat, uploadVoice } from "@/api/api";
import md5 from "js-md5";
import contentList from "./components/content-list.vue";
import "../../assets/js/annyang";
import Recorder from "recorder-core";
import "recorder-core/src/engine/mp3";
import "recorder-core/src/engine/mp3-engine";
import "recorder-core/src/extensions/waveview";
export default {
  name: "AI",
  components: {
    contentList,
  },
  data() {
    return {
      textCount: 0,
      timer: null,
      // 内容
      content: "",
      messages: [],
      disabled: false,
      dialogVisible: false,
      //  打赏弹窗
      reward: false,
      //
      wxCode: false,
      talkList: [],
      tid: localStorage.getItem("talkId"),
      type: this.$route.query.type,
      rec: null,
      deviceId: "",
    };
  },
  created() {
    let that = this;
    navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
      navigator.mediaDevices.enumerateDevices().then(function (devices) {
        devices.forEach(function (device) {
          console.log("device", device);
          if (device.kind === "audioinput") {
            // 麦克风
            if (
              device.deviceId != "default" &&
              device.deviceId != "communications"
            ) {
              that.deviceId = device.deviceId;
            }
          }
        });
      });
      stream.getTracks().forEach((track) => track.stop());
    });
    this.recOpen();
    this.messages = localStorage.getItem("messages")
      ? JSON.parse(localStorage.getItem("messages"))
      : [];
    this.talkList = localStorage.getItem("talkList")
      ? JSON.parse(localStorage.getItem("talkList"))
      : [];

    let arr = [
      {
        topic: null,
        describe: null,
        annotation: null,
        fileUrl: null,
        status: 0,
        allScore: 0,
        stuGraScoreList: [],
      },
    ];

    console.log(arr[0].allScore);
    setTimeout((_) => {
      this.handleScrollBottom(); //滚动至最底部
    }, 100);
  },
  mounted() {
    if (this.type == "app") {
      this.$refs.header.style = "display:none";
      this.$refs.scrollDiv.style = "margin-top:-35px";
    }
    window.addEventListener('keydown', this.handleKeyDown);

  },
  methods: {

    // handleKeyDown(e){
    //    let text=e.keyCode;
    //     if(text==49){
    //         this.play('1')
    //     }else if(text==50){
    //         this.play('2')
    //     }else{
    //         this.play('3')
    //     }
    //     // <button class="new_talk" @click="">唤醒</button>
    //     // <button class="new_talk" @click="">自我介绍</button>
    //     // <button class="new_talk" @click="">描述中南智能</button>
    // },
    recOpen() {
      let that = this;

      //创建录音对象
      this.rec = Recorder({
        type: "mp3", //录音格式，可以换成wav等其他格式
        sampleRate: 16000, //录音的采样率，越大细节越丰富越细腻
        bitRate: 16, //录音的比特率，越大音质越好
        audioTrackSet: {
          deviceId: that.deviceId,
          groupId: "", //指定设备的麦克风，通过navigator.mediaDevices.enumerateDevices拉取设备列表，其中kind为audioinput的是麦克风
          noiseSuppression: true, //降噪（ANS）开关，不设置时由浏览器控制（一般为默认打开），设为true明确打开，设为false明确关闭
          echoCancellation: true, //回声消除（AEC）开关，取值和降噪开关一样
          autoGainControl: true, //自动增益（AGC）开关，取值和降噪开关一样
        },
        onProcess: (
          buffers,
          powerLevel,
          bufferDuration,
          bufferSampleRate,
          newBufferIdx,
          asyncEnd
        ) => {
          //录音实时回调，大约1秒调用12次本回调
          //可实时绘制波形，实时上传（发送）数据
          if (this.wave)
            this.wave.input(
              buffers[buffers.length - 1],
              powerLevel,
              bufferSampleRate
            );
        },
      });

      //打开录音，获得权限 
      this.rec.open(
        () => {
          console.log("录音已打开");
          //   if (this.$refs.recwave) {
          //     //创建音频可视化图形绘制对象
          //     this.wave = Recorder.WaveView({ elem: this.$refs.recwave });
          //   }
        },
        (msg, isUserNotAllow) => {
          //用户拒绝了录音权限，或者浏览器不支持录音
          console.log(
            (isUserNotAllow ? "UserNotAllow，" : "") + "无法录音:" + msg
          );
        }
      );
    },

    recStop() {
      if (!this.rec) {
        console.error("未打开录音");
        return;
      }
      this.rec.stop(
        (blob, duration) => {
          //blob就是我们要的录音文件对象，可以上传，或者本地播放
          this.recBlob = blob;
          //简单利用URL生成本地文件地址，此地址只能本地使用，比如赋值给audio.src进行播放，赋值给a.href然后a.click()进行下载（a需提供download="xxx.mp3"属性）
          var localUrl = (window.URL || webkitURL).createObjectURL(blob);
          console.log("录音成功", blob, localUrl, "时长:" + duration + "ms");

          this.upload(blob); //把blob文件上传到服务器

        //   this.rec.close(); //关闭录音，释放录音资源，当然可以不释放，后面可以连续调用start
        //   this.rec = null;
        },
        (err) => {
          console.error("结束录音出错：" + err);
          this.rec.close(); //关闭录音，释放录音资源，当然可以不释放，后面可以连续调用start
          this.rec = null;
        }
      );
    },

    recPlay() {
      //本地播放录音试听，可以直接用URL把blob转换成本地播放地址，用audio进行播放
      var localUrl = URL.createObjectURL(this.recBlob);
      var audio = document.createElement("audio");
      audio.controls = true;
      document.body.appendChild(audio);
      audio.src = localUrl;
      audio.play(); //这样就能播放了

      //注意不用了时需要revokeObjectURL，否则霸占内存
      setTimeout(function () {
        URL.revokeObjectURL(audio.src);
      }, 5000);
    },

    async upload(blob) {
      try {
        //使用FormData用multipart/form-data表单上传文件
        //或者将blob文件用FileReader转成base64纯文本编码，使用普通application/x-www-form-urlencoded表单上传
        var form = new FormData();
        form.append("file", blob, "recorder.mp3"); //和普通form表单并无二致，后端接收到upfile参数的文件，文件名为recorder.mp3
        form.append("userName", "你好"); //其他参数
        // const res = await uploadVoice(form);
        // console.log("res",res);
        uploadVoice(form).then(
          (res) => {
            let data;
            if (res && res.code !== 200) {
              data = res.message;
            } else {
              data = res.sendData;
            }
            //   slice(0,3)
            this.messages = res.sendData.slice(0, res.sendData.length - 1);
            this.play(res.sendData[res.sendData.length - 1].content);
            this.getChatContent(
              res.sendData[res.sendData.length - 1].content,
              res.sendData.length - 1
            );
            // data = res.data.indexOf('"error": {') != -1 ? "获取失败，请重试，或重新开启对话！" : res.data
            //   this.messages[this.messages.length - 1].content = data;
            this.handleScrollBottom(); //滚动至最底部
            this.disabled = false;
          },
          (error) => {
            this.messages[this.messages.length - 1].content =
              "服务器繁忙，请重新尝试";
            this.messages[this.messages.length - 1].userName = "assistant";
            this.handleScrollBottom(); //滚动至最底部
            this.disabled = false;
          }
        );
      } catch (error) {}
    },

    recStart() {
      if (!this.rec) {
        console.error("未打开录音");
        this.recOpen();
      }
      this.rec.start();
      console.log("已开始录音");
    },
    audioGet() {},
    //文字转语音
    play(text) {
        // let msg1 
        // // = new SpeechSynthesisUtterance('你好，我是工业小智');
        // if(text==1){
        //     msg1= new SpeechSynthesisUtterance('小智在呢，请问有什么需要');
        // }else if(text==2){
        //     msg1= new SpeechSynthesisUtterance('我是中南小智');
        // }else{
        //     msg1= new SpeechSynthesisUtterance('完成了1.5亿订单');
        // }
      const msg = new SpeechSynthesisUtterance(text);
      
      window.speechSynthesis.speak(msg);
    },

    getChatContent(text, index) {
      this.timer = setInterval(() => {
        this.textCount++;

        if (this.textCount == text.length + 1) {
          this.textCount = 0;
          this.messages.splice(index, 1, {
            content: text,
            userName: "assistant",
          });
          clearInterval(this.timer);

          return;
        }

        // 取字符串子串
        let nowStr = text.substring(0, this.textCount);
        this.messages.splice(index, 1, {
          content: nowStr,
          userName: "assistant",
        });
        this.handleScrollBottom(); //滚动至最底部
      }, 220);
    },

    //
    send() {
      this.handleScrollBottom();
      if (!this.content) {
        return;
      }
      this.disabled = true;
      //   let timeStamp = this.getTimeStamp();
      let user = {
        userName: "你好",
        content: this.content.trim(),
      };
      let system = {
        userName: "assistant",
        content: "wait",
      };
      this.messages.push(user);
      this.messages.push(system);

      let format = this.content.trim();
      let sign = md5(format);

      this.content = "";
      this.handleScrollBottom(); //滚动至最底部

      //   let req = {
      //     messages: this.messages.slice(0, -1),
      //     // model: "gpt-3.5-turbo",
      //     sign: sign,
      //     timestamp: timeStamp,
      //   };

      openChat(user).then(
        (res) => {
          let data;
          if (res && res.code !== 200) {
            data = res.message;
          } else {
            data = res.sendData;
          }
          //   slice(0,3)
          this.messages = res.sendData.slice(0, res.sendData.length - 1);
          this.play(res.sendData[res.sendData.length - 1].content);
          this.getChatContent(
            res.sendData[res.sendData.length - 1].content,
            res.sendData.length - 1
          );
          // data = res.data.indexOf('"error": {') != -1 ? "获取失败，请重试，或重新开启对话！" : res.data
          //   this.messages[this.messages.length - 1].content = data;
          this.handleScrollBottom(); //滚动至最底部
          this.disabled = false;
        },
        (error) => {
          this.messages[this.messages.length - 1].content =
            "服务器繁忙，请重新尝试";
          this.messages[this.messages.length - 1].userName = "assistant";
          this.handleScrollBottom(); //滚动至最底部
          this.disabled = false;
        }
      );
    },
    // getTimeStamp() {
    //   let dateNow = new Date();
    //   let nowTime = dateNow.getTime();
    //   return nowTime;
    // },
    handleScrollBottom() {
      this.$nextTick(() => {
        let scrollElem = this.$refs.scrollDiv;
        scrollElem.scrollTo({
          top: scrollElem.scrollHeight,
          behavior: "smooth",
        });
      });
      localStorage.setItem("messages", JSON.stringify(this.messages));
    },
    handleClose(done) {
      done();
    },
    popupShow() {
      this.$refs.popup.style = "left:0;background: rgba(0, 0, 0, 0.5)";
    },
    popupClose() {
      this.$refs.popup.style = "left:-100vw";
    },
    assign(text) {
      this.content = text;
    },
    // // 保存历史数据据
    // saveHistory() {
    //   let obj = {
    //     id: "scene" + this.getTimeStamp(),
    //     data: this.messages,
    //   };
    //   if (this.messages.length > 0) {
    //     if (localStorage.getItem("talkId")) {
    //       this.talkList.map((item) => {
    //         if (item.id == localStorage.getItem("talkId")) {
    //           item.data = this.messages;
    //         }
    //       });
    //     } else {
    //       this.talkList.unshift(obj);
    //     }
    //     localStorage.removeItem("talkId");
    //     this.tid = "";
    //     this.talkList = this.talkList.slice(0, 8);
    //     localStorage.setItem("talkList", JSON.stringify(this.talkList));
    //   }
    // },
    // newTalk() {
    //   this.saveHistory();

    //   this.messages = [];
    //   localStorage.setItem("messages", JSON.stringify([]));
    //   this.popupClose();
    // },
    // reTalk(item) {
    //   this.saveHistory();

    //   localStorage.setItem("talkId", item.id);
    //   this.tid = item.id;
    //   this.messages = item.data;
    //   this.popupClose();
    //   setTimeout((_) => {
    //     this.handleScrollBottom(); //滚动至最底部
    //   }, 100);
    // },
  },
};
</script>

<style lang="less" scoped>
@contentWidth: 800px;
@themeColor: #4684ff;
// @themeColor: #4684ff;
@commonColor: #eee;
@themeRadius: 6px;

.container {
  display: flex;
  justify-content: space-between;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  min-width: 100px;
  transition: 0.6s;
  background-image: url("https://luvi.gitee.io/ai/publicImages/login_background.c41c40af.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  backdrop-filter: blur(10px);
}

.con_left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: center;
  min-width: 250px;
  max-width: 250px;
  background: rgba(255, 255, 255, 1);
  height: 100%;
  padding: 20px 0;
  box-sizing: border-box;
  transition: 0.5s;

  .talk_list {
    width: 80%;
    margin-top: 10px;
    color: #4c4c4c;

    .border {
      border: 1px solid #778dfc;
      background: #f2f6ff;

      color: #6e86ff;

      &:hover {
        background: #f0f4ff;
      }

      // font-weight: bold;
    }

    div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 45px;
      border: 1px solid #eee;
      border-radius: 6px;
      padding: 0 15px 0 15px;
      font-size: 14px;
      box-sizing: border-box;
      cursor: pointer;
      margin-top: 10px;
      color: #595959;

      span {
        display: inline-block;
        text-align: left;
        width: 80%;
        overflow: hidden;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }

      &:hover {
        background-image: linear-gradient(to right, #eee, #eee);
      }
    }
  }

  .copyright {
    position: absolute;
    bottom: 55%;
    width: 90%;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 8px;

    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 10px;
    }

    div {
      color: #424242;

      h2 {
        font-size: 15px;
      }
    }

    p {
      font-size: 13px;
      margin-top: 2px;
    }

    a {
      color: #266dfb;
      font-weight: normal !important;
    }
  }

  .new_talk {
    border: none;
    width: 80%;
    height: 45px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 16px;
    background-image: linear-gradient(to right, #778dfc, #3d73e9);

    border-radius: @themeRadius;
    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08);
    color: #fff;
    cursor: pointer;
    transition: 0.2s;

    &:hover {
      background-image: linear-gradient(to right, #6b83fb, #3d8de4);
    }

    &:active {
      background-image: linear-gradient(to right, #6b83fb, #3d8de4);
    }
  }

  .other {
    position: absolute;
    bottom: 90px;
    width: 90%;
    border-radius: 6px;
    overflow: hidden;

    .bar {
      line-height: 45px;
      // border-bottom: 1px solid #ddd;
      font-weight: bold;
      // background: #eeeeee;
      color: #5a5a5a;
      box-sizing: border-box;
      cursor: pointer;
      font-size: 14px;
      padding: 0 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &:hover {
        background: #eee;
      }

      &:nth-child(3) {
        border: none;
      }
    }
  }
}

.con_right {
  position: relative;
  min-width: 800px;
  width: 100%;
  height: 100%;
  // background: #ECEFF6;
  // background-image: linear-gradient(45deg, #f6f8ff, #E2E8FF);

  .header {
    position: absolute;
    z-index: 1;
    width: 100%;
    display: flex;
    display: none;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(to left, #5185ff, 1px, #5185ff);
    backdrop-filter: blur(8px);
    height: 45px;

    span {
      font-size: 16px;
      text-align: center;
      color: #ffffff;
      font-weight: bold;
    }

    img {
      width: 140px;
    }

    .more_button {
      display: none;
      position: absolute;
      left: 15px;
      font-size: 23px;
      width: 35px;
      height: 35px;
      color: #fff;
      text-align: center;
      line-height: 35px;

      &:active {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 3px;
      }
    }
  }

  .content {
    width: 100%;

    .limit {
      margin: auto;
      width: @contentWidth;
      margin-top: 60px;
    }

    .tip {
      padding-left: 6px;
      border-left: 3px solid #266dfb;
      margin-left: 20px;
      box-sizing: border-box;
      font-size: 14px;
      color: #4a4a4a;
    }

    .primary_con {
      padding: 20px 10px;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      text-align: center;

      h3 {
        margin-bottom: 15px;
        color: #303030;
      }

      div {
        width: 50%;
        padding: 10px;
        box-sizing: border-box;
      }

      p {
        line-height: 35px;
        margin-top: 10px;
        background: #f7f7f8;
        border-radius: 5px;
        font-size: 13px;
        color: #4a4a4a;
        cursor: pointer;

        &:hover {
          background: #e9e9ea;
        }

        &:active {
          background: #d6d6d6;
        }

        i {
          font-size: 15px;
        }
      }

      i {
        font-size: 26px;
      }
    }

    .content_list {
      width: calc(100%);
      padding-top: 50px;
      padding-bottom: 170px;
      // padding-left: 3px;
      box-sizing: border-box;
      overflow: scroll;
      height: calc(100vh);
      overflow-x: hidden;
    }

    .talk_con {
      margin: auto;
      width: calc(@contentWidth);
    }
  }

  // footer总高度175px
  .footer {
    position: absolute;
    // background: #ECEFF6;
    // padding-top: 30px;
    // background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), 3%, #ECEFF6);
    backdrop-filter: blur(20px);

    bottom: 0px;
    width: 100%;

    .input_con {
      position: relative;
      margin: auto;
      width: @contentWidth + 100px;

      .sub_btn {
        position: absolute;
        right: 10px;
        line-height: 38px;
        border-radius: 5px;
        bottom: 10px;
        width: 38px;
        text-align: center;
        color: #fff;
        cursor: pointer;
        transition: 0.2s;
        font-size: 21px;
        background-image: linear-gradient(to right, #778dfc, #3d73e9);

        &:hover {
          background-image: linear-gradient(to right, #778dfc, #6178ec);
        }
      }

      .sub_btn1 {
        position: absolute;
        right: 60px;
        line-height: 38px;
        border-radius: 5px;
        bottom: 10px;
        width: 38px;
        text-align: center;
        color: #fff;
        cursor: pointer;
        transition: 0.2s;
        font-size: 21px;
        background-image: linear-gradient(to right, #778dfc, #3d73e9);

        &:hover {
          background-image: linear-gradient(to right, #778dfc, #6178ec);
        }
      }

      // .el-input {
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   box-sizing: border-box;
      //   border: 1px solid #e9e9e9;
      //   width: 100%;
      //   line-height: 45px;
      //   padding: 0 45px 0 15px;
      //   border-radius: 6px;
      //   // height: 50px;
      //   transition: 0.3s;
      //   letter-spacing: 0.5px;
      //   color: #383838;
      //   box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.02);

      //   &:focus {
      //     outline: none;
      //     border: 1px solid @themeColor;
      //     box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.03);
      //   }
      // }

      /deep/ .el-textarea__inner {
        box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.02);
        border-radius: 8px;
        font-family: "black";
        padding: 10px 10px;
        box-sizing: border-box;

        &:focus {
          outline: none;
          border: 1px solid @themeColor;
          box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.03);
        }
      }
    }

    p {
      margin-top: 15px;
      margin-bottom: 20px;
      box-sizing: border-box;
      font-size: 10px;
      color: #909090;
      text-align: center;

      span {
        text-decoration: underline;
        color: @themeColor;
        cursor: pointer;
      }
    }
  }
}

/* android适配css 从下开始 */
@media (max-width: 800px) {
  .popup {
    position: absolute;
    left: -100vw;
    z-index: 4;
    height: 100%;
    width: 100vw;
    transition: 0.5s;
  }

  .con_left {
    max-width: 200px;
  }

  .con_right {
    min-width: 100%;

    .limit {
      max-width: 100%;
    }

    .header {
      display: block;
      display: flex;
      background-image: linear-gradient(to right, #778dfc, #3d73e9);
    }

    .more_button {
      display: block !important;
      color: #fff !important;
    }

    .talk_con {
      max-width: 100%;
    }
  }

  .input_con {
    max-width: 95%;
  }

  .content_list {
    max-width: calc(100% - 30px);
    margin: auto;
  }

  /deep/ .el-dialog {
    width: 85% !important;
  }
}
</style>
